fix: scale Search Router Spend context with system font size - #97281
Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@marufsharifi Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| textStyle?: StyleProp<TextStyle>; | ||
| numberOfLines?: number; | ||
| }; | ||
|
|
There was a problem hiding this comment.
❌ CONSISTENCY-2 (docs)
The new default parameter value iconSize = 12 is a magic number. The codebase already defines this exact value as a named constant, variables.iconSizeExtraSmall (which equals 12), and it is already used by other Search components (e.g. DropdownButton.tsx, WithdrawalIDListItemHeader.tsx). Using the raw literal here obscures its meaning and duplicates a value that lives in the style system.
Import variables and use the named constant as the default instead:
import variables from '@styles/variables';
export default function TextWithIconCell({icon, iconSize = variables.iconSizeExtraSmall, text, showTooltip, textStyle, numberOfLines = 1}: TextWithIconCellProps) {Reviewed at: 62ea950 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
…spend-font-scaling fix: scale Search Router Spend context with system font size (cherry picked from commit baa71aa) (cherry-picked to staging by roryabraham)
|
🚧 carlosmiceli has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.45-9 🚀
|
|
🤖 No help site changes required. I reviewed this PR against Expensify's help site files under Why: This is a purely visual fix. It makes the "Spend" context icon and text in the Search Router scale correctly with the system font size (so "Spend" isn't clipped at maximum font size) by adding an optional
I also confirmed there are no existing articles in Since no help site changes are required, I did not create a draft docs PR. @nabi-ebrahimi, please confirm you agree no help site updates are needed here. If you believe a doc change is warranted, let me know what behavior should be documented and I'll create the draft PR. |
|
🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.45-10 🚀
|
|
🤖 No help site changes required (confirming my earlier review). This PR is a purely visual fix — it makes the "Spend" context icon and text in the Search Router scale with the system font size so "Spend" isn't clipped at maximum font size. There's no change to any user-facing feature, workflow, terminology, setting, or button that a help article would document, and no existing article under @nabi-ebrahimi, please confirm you agree no help site updates are needed here. If you believe a doc change is warranted, let me know what behavior should be documented and I'll create the draft PR. |
|
🚀 Deployed to production by https://github.com/marcaaron in version: 9.4.45-14 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.46-0 🚀
|
Help site review — no changes requiredI reviewed the changes in this PR and no updates are needed to the help site files under Why: This is a purely visual/accessibility fix. It makes the Since the help site documents what features do and how to use them (not pixel-level rendering behavior), there's nothing to add or revise here. No draft PR was created. @nabi-ebrahimi, no help site PR was created because this change doesn't affect any documented behavior. If you believe a specific article should still be updated, let me know which one and what it should say and I'll draft it. |
|
🚀 Deployed to production by https://github.com/marcaaron in version: 9.4.46-10 🚀
Bundle Size Analysis (Sentry): |
4 participants
Explanation of Change
Updates the Search Router’s right-side Spend context so its icon and text scale correctly with the system font size.
TextWithIconCellnow accepts an optional icon size while retaining the existing12pxdefault for other callers. The Spend context uses the label font and matching icon size, preventing “Spend” from being clipped at maximum font size.Fixed Issues
$ #97248
PROPOSAL: N/A
Tests
Maximum font size
Precondition: Set the device font size to maximum and use an account with at least one workspace.
go to.Offline tests
Same as Tests.
QA Steps
Same as Tests.
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari